import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Button, Divider } from 'react-vant';
import './join.less';
import joinpw from '../assets/join-pw.png';
import joinyx from '../assets/join-yx.png';

const goBack = () => {
  history.back();
}
const goJoinPw = () => {
  history.push('/join-pw');
}
const goJoinYx = () => {
  history.push('/join-yx');
}

export default function JoinPage() {
  return (
    <div className='join'>
      <NavBar title='申请成为搭档' leftText='返回' onClickLeft={goBack} />
      <div className='container'>
        <Divider>选择申请入驻的搭档类型</Divider>
        <Flex className='join-type peiwan' align='center' justify='between' onClick={goJoinPw}>
          <Flex.Item className='join-type-icon' span={6}><img className='type-img' src={joinpw} alt=''/></Flex.Item>
          <Flex.Item className='join-type-content' span={14}>
            <h3 className='title'>陪玩搭档</h3>
            <p className='desc'>有颜有才爱玩即可申请。<br/>绿色、安全，客服全程服务！</p>
          </Flex.Item>
          <Flex.Item className='join-type-btn' span={4}>
            <Button round className='join-btn' size='small'>申请</Button>
          </Flex.Item>
        </Flex>
        <Flex className='join-type yingxiao' align='center' justify='between' onClick={goJoinYx}>
          <Flex.Item className='join-type-icon' span={6}><img className='type-img' src={joinyx} alt=''/></Flex.Item>
          <Flex.Item className='join-type-content' span={14}>
            <h3 className='title'>营销搭档</h3>
            <p className='desc'>拥有客户资源即可申请。<br/>佣金高、结算快。</p>
          </Flex.Item>
          <Flex.Item className='join-type-btn' span={4}>
            <Button round className='join-btn' size='small'>申请</Button>
          </Flex.Item>
        </Flex>
      </div>
    </div>
  );
}
